<script lang="ts" setup>
import type { PickerValueType } from '@tuniao/tnui-vue3-uniapp/components/picker/src/picker';

import { useUserStore } from '@/store';
import { getStaticImage } from '@/utils/index';
import { notifyAreaEsListChange } from '@/service/useMy';

const userStore = useUserStore();
const {
    token,
    userInfo,
    currentRoleId,
    grid,
    roleAreaList,
    roleDeptList,
    currentAreaCode,
    currentDeptId,
    currentUserDept
} = storeToRefs(userStore);

const isLogin = computed(() => {
    return !!token.value;
});

const areaPickerShow = ref(false);
const deptPickerShow = ref(false);
const handleAreaPickerConfirm = (value: PickerValueType) => {
    const item = roleAreaList.value.find((item) => item.value === value);
    if (item) {
        userStore.setUserArea(item.data);
        notifyAreaEsListChange({
            current: 1,
            size: 20
        });
    }
    areaPickerShow.value = false;
};

const handleDeptPickerConfirm = (value: PickerValueType) => {
    const item = roleDeptList.value.find((item) => item.value === value);
    if (item) {
        userStore.setUserDepartment(item.data);
        notifyAreaEsListChange({
            current: 1,
            size: 20
        });
    }
    areaPickerShow.value = false;
};

const mobile = computed(() => {
    return isLogin.value
        ? userInfo.value?.mobile
            ? userInfo.value.mobile.substring(0, 3) +
              '****' +
              userInfo.value.mobile.substring(8)
            : ''
        : '--';
});
</script>

<template>
    <view class="userinfo-container">
        <view
            class="userinfo flex flex-row items-center justify-between w-full"
        >
            <view>
                <view
                    class="flex flex-row items-center justify-between mb-[16rpx]"
                    @tap.stop="
                        () =>
                            !isLogin &&
                            userStore.createBackRouteOptionAndGoLogin()
                    "
                >
                    <view class="flex flex-row items-center">
                        <text class="c-text text-lg fw-700">{{
                            isLogin ? userInfo?.name : '登录'
                        }}</text>
                        <view class="c-text2 text-sm ml-[10rpx]">{{
                            mobile
                        }}</view>
                    </view>
                </view>
                <text class="c-text2 text-sm" v-if="isLogin">{{
                    `${userInfo?.roleList && userInfo.roleList.length > 0 ? userInfo.roleList[0].name : '待分配'}`
                }}</text>
            </view>
            <view>
                <CustomImage
                    v-if="userInfo?.avatar"
                    :sourceId="userInfo?.avatar"
                    shape="circle"
                    width="100rpx"
                    height="100rpx"
                />
                <view v-else>
                    <image
                        :src="getStaticImage(`/user/man.png`)"
                        style="
                            width: 100rpx;
                            height: 100rpx;
                            border-radius: 50%;
                        "
                    />
                </view>
            </view>
        </view>

        <view
            class="gridinfo mt-[20rpx]"
            v-if="
                isLogin &&
                currentRoleId &&
                [
                    2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 13, 15, 17, 18, 19, 20, 24
                ].includes(currentRoleId) &&
                roleAreaList &&
                roleAreaList.length > 0
            "
        >
            <image
                :src="getStaticImage(`/index/grid_img.png`)"
                style="width: 24rpx; height: 24rpx"
            />
            <text class="c-white fs-s ml-[18rpx]">{{ grid }}</text>
            <text
                class="c-orange fs-s ml-[18rpx]"
                style="white-space: nowrap"
                @tap.stop="() => (areaPickerShow = true)"
                >切换</text
            >
        </view>
        <view
            class="gridinfo mt-[20rpx]"
            v-if="
                isLogin &&
                currentRoleId &&
                [12, 16, 21, 22, 23].includes(currentRoleId) &&
                roleDeptList &&
                roleDeptList.length > 0
            "
        >
            <image
                :src="getStaticImage(`/index/grid_img.png`)"
                style="width: 24rpx; height: 24rpx"
            />
            <text class="c-white fs-s ml-[18rpx]">{{
                currentUserDept?.name
            }}</text>
            <text
                class="c-orange fs-s ml-[18rpx]"
                style="white-space: nowrap"
                @tap.stop="() => (deptPickerShow = true)"
                >切换</text
            >
        </view>

        <TnPicker
            :model-value="currentAreaCode"
            v-model:open="areaPickerShow"
            @confirm="handleAreaPickerConfirm"
            :data="roleAreaList"
        />

        <TnPicker
            :model-value="currentDeptId"
            v-model:open="deptPickerShow"
            @confirm="handleDeptPickerConfirm"
            :data="roleDeptList"
        />
    </view>
</template>

<style lang="scss" scoped>
.userinfo-container {
    border-radius: 16rpx;
    .userinfo {
        padding: 32rpx;
        border-radius: 16rpx;
        border: 2rpx solid rgba(55, 112, 246, 0.04);
        // background: #edf6ff;
        background: var(--bg-lightblue);
    }

    .gridinfo {
        background: var(--bg-bluetopurple);
        border-radius: 16rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 26rpx 34rpx;
        width: 702rpx;
    }
}
</style>
